<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0， user-scalable=0, maximum-scale=1.0, minimum-scale=1.0">
    <title>陈海亮</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

    
        .top{
            height: 50px;
            line-height: 50px;
            background-color: #232326;
            color: #fff;
            text-align: center;
        }
        .top ul li{
            float: left;
            list-style: none;
        }
        .top ul li:nth-child(1){
            width: 8%;
        }
        .top ul li:nth-child(1) img{
            width: 16px;
        }
        .top ul li:nth-child(2) img{
            width: 40px;
            height: 40px;
        }
        .top ul li img{
            vertical-align: middle;
        }
        .top ul li:nth-child(2){
            width: 10%;
        }
        .top ul li:nth-child(3){
            width: 57%;
        }
        .top ul li:nth-child(4){
            width: 25%;
            background-color: #cd2525;
        }
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #eee;
        }

        .fir {
            width: 100%;
            height: 100%;
            position: relative;
            background: #eee;
        }

        .content {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 50px;
            background: #eee;
            overflow-x: hidden;
            overflow-y: auto;
        }

        .header {
            width: 100%;
            height: 195px;
        }

        .box {
            width: 100%;
            height: 116px;
            background-color: #C82519;
            border-bottom-left-radius: 45px;
            border-bottom-right-radius: 45px;
        }

        .min_box {
            width: 100%;
            height: 44px;
            display: flex;
            justify-content: space-between;
        }

        .box_left {
            width: 40px;
            display: flex;
            justify-content: center;
        }

        .box_center {
            width: 100%;
            margin: 7px 11px 0 11px;
            background-color: #fff;
            height: 30px;
            border-radius: 25px;
            flex-grow: 1;
            display: flex;
        }

        .box_right {
            width: 40px;
        }

        .box_right_box {
            width: 40px;
        }

        .box_right .box_right_box .box_right_box_dl {
            margin-top: 10px;
            font-size: 14px;
            color: #fff;
        }

        .box .box_left img {
            margin-left: 10px;
            padding-top: 7px;
            width: 32px;
            height: 33px;
        }

        .box .box_center .box_center_logo img {
            margin: 8px 8px 0 15px;
            width: 19px;
            height: 14px;
        }

        .box_center_logo {
            width: 20px;
        }

        .box_center_left {
            width: 20px;
        }

        .box_center_left .box_center_left_span {
            float: left;
            width: 1px;
            height: 20px;
            background: #eee;
            margin: 5px 0 0 23px;
        }

        .box_center_center img {
            margin: 6px 4px 0 10px;
            width: 18px;
            height: 18px;
        }

        .box_center_right {
            flex-grow: 1;
        }

        .box_center_right .box_center_right_input {
            line-height: 10px;
            font-size: 12px;
            padding: 10px;
            width: 70px;
            height: 9px;
            outline: none;
            border: 1px #eee;
        }
/* 轮播图1 */
        .left {
            width: 12.5px;
        }

        .right {
            width: 12.5px;
        }

        .swiper-container1 {
            width: 93%;
            height: 140px;
            margin-bottom: 10px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
        }

        .swiper-container2 {
            width: 100%;
            height: 145.9px;
            padding-bottom: 10px;
        }

        .swiper-wrapper img {
            width: 100%;
            height: 100%;
            flex-grow: 1;
        }


        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #eee;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide li {
            width: 20%;
            float: left;
            list-style: none;
            padding-bottom: 10px;
        }

        .swiper-slide li img {
            width: 39px;
            height: 39px;
        }

        .swiper-slide span {
            display: block;
            text-align: center;
            width: 100%;
            height: 18px;
            font-size: 13px;
        }

        .swiper-slide a {
            text-decoration-line: none;
        }

        /* 四图 */
        .three{
            width: 90%;
            height: 180px;
            background-color:white;
            float: left;
            margin-left: 5%;
            margin-right: 5%;
            margin-bottom: 5%;
        }
        .title{
           text-align: center;
           width: 100%;
        }
        h1{
        font-size: 23px;
        }
        .t-a{
            float: left;
        }
        .title-one{
            width:100%;
            font-size: 18px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .title-one{
            width: 100%;
            display: flex;
            justify-content: center;

        }
        .t-a img{
            width: 100%; 
            float: left;
        }
       /* 二层盒子 */
.center-title{
            width: 90%;
           
            background-color:white;
            float: left;
            margin-left: 5%;
            margin-right: 5%;
            margin-bottom: 10%;
}
.t-b{
    width: 50%;
    float: left;
}
.t-bc{
    width: 25%;
    float: left;
}
.t-b img{
            width: 100%; 
            float: left;
        }
        .t-bc img{
            width: 100%; 
            float: left;
        }



        /* 底部导航栏 */

        .bottom{
            display: flex;
            width: 100%;
            justify-content: center;
            background-color: white;
            position:fixed;bottom:0
        }

        .t-b img{
            width: 70%;
           float: left;
        }
    </style>
</head>

<body>
        <div class="top">
                <ul>
                    <li><img src="./1.png"alt=""></li>
                    <li><img src="./2.png"alt=""></li>
                    <li>打开京东app，购物轻松又实惠</li>
                    <li>立即打开</li>
                </ul>
            </div>
        </div>
    <div class="fir">
        <div class="content">
            <div class="header">
                <div class="box">
                    <div class="min_box">
                        <div class="box_left"><img src="./icons/分类.png" alt=""></div>
                        <div class="box_center">
                            <div class="box_center_logo">
                                <img src="./icons/京东1.png" alt="">
                            </div>
                            <div class="box_center_left">
                                <span class="box_center_left_span"></span>
                            </div>
                            <div class="box_center_center">
                                <img src="./icons/搜索.png" alt="">
                            </div>
                            <div class="box_center_right">
                                <input type="text" class="box_center_right_input" placeholder="搜索">
                            </div>
                        </div>
                        <div class="box_right">
                            <div class="box_right_box">
                                <div class="box_right_box_dl">登录</div>
                            </div>
                        </div>
                    </div>

                    <div class="swiper-container swiper-container1">
                        <div class="left"></div>
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="./图片/1.png"></div>
                            <div class="swiper-slide"><img src="./图片/2.png"></div>
                            <div class="swiper-slide"><img src="./图片/3.png"></div>
                            <div class="swiper-slide"><img src="./图片/4.png"></div>
                            <div class="swiper-slide"><img src="./图片/5.png"></div>
                            <div class="swiper-slide"><img src="./图片/6.png"></div>
                            <div class="swiper-slide"><img src="./图片/7.png"></div>
                            <div class="swiper-slide"><img src="./图片/8.png"></div>
                        </div>
                        <div class="right"></div>
                        <div class="swiper-pagination swiper-pagination1"></div>
                    </div>
                </div>

            </div>
            <div class="swiper-container swiper-container2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <ul>
                            <li><a href=""><img
                                        src="./图片/a.png" alt=""></a><span>京东超市</span></li>
                            <li><a href=""><img
                                        src="./图片/b.png" alt=""></a><span>数码电器</span></li>
                            <li><a href=""><img
                                        src="./图片/c.png" alt=""></a><span>京东服饰</span></li>
                            <li><a href=""><img
                                        src="./图片/d.png" alt=""></a><span>京东生鲜</span></li>
                            <li><a href=""><img src="./图片/e.png"
                                        alt=""></a><span>京东到家</span></li>
                            <li><a href=""><img
                                        src="./图片/f.png" alt=""></a><span>充值缴费</span></li>
                            <li><a
                                    href=""><img
                                        src="./图片/g.png" alt=""></a><span>9.9元拼</span></li>
                            <li><a href=""><img
                                        src="./图片/h.png" alt=""></a><span>领卷</span></li>
                            <li><a href=""><img
                                        src="./图片/i.png" alt=""></a><span>借钱</span></li>
                            <li><a href=""><img src="./图片/j.png"
                                        alt=""></a><span>PLUS会员</span>
                            </li>
                        </ul>
                    </div>
                    <div class="swiper-slide">
                        <ul>
                            <li><a href=""><img
                                        src="./图片/aa.png" alt=""></a><span>京东国际</span></li>
                            <li><a href=""><img src="./图片/bb.png" alt=""></a><span>京东拍卖</span></li>
                            <li><a href=""><img
                                        src="./图片/cc.png" alt=""></a><span>唯品会</span></li>
                            <li><a href=""><img
                                        src="./图片/dd.png" alt=""></a><span>玩3C</span></li>
                            <li><a href=""><img
                                        src="./图片/ee.png" alt=""></a><span>沃尔玛</span></li>
                            <li><a href="l"><img
                                        src="./图片/ff.png" alt=""></a><span>美妆馆</span></li>
                            <li><a href=""><img
                                        src="./图片/gg.png" alt=""></a><span>京东旅行</span></li>
                            <li><a href=""><img
                                        src="./图片/hh.png" alt=""></a><span>拍拍二手</span></li>
                            <li><a href=""><img src="./图片/ii.png"
                                        alt=""></a><span>物流查询</span></li>
                            <li><a href=""><img src="./图片/jj.png"
                                        alt=""></a><span>全部</span></li>
                        </ul>
                        <div class="twos">   
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination swiper-pagination2"></div>
            </div>

  <div class="three">
<div class="title">
    <h1>京东好货 &nbsp;&nbsp;等你来购</h1>
    <div class="title-one">
        <div class="t-a">汽车用品 <img src="./img/1.png" alt=""></div>
        <div class="t-a">汽车保养 <img src="./img/2.png" alt=""></div>
        <div class="t-a">生活用品 <img src="./img/3.png" alt=""></div>
    </div>
    </div>
  </div>
  <div class="bottom">
        <div class="t-b"><a href=""><img src="./img/a.png" alt=""></a></div>
        <div class="t-b"><a href=""><img src="./img/b.png" alt=""></a></div>
        <div class="t-b"><a href=""><img src="./img/c.png" alt=""></a></div>
        <div class="t-b"><a href=""><img src="./img/d.png" alt=""></a></div>
        <div class="t-b"><a href=""><img src="./img/e.png" alt=""></a></div>
             

    <script src="./js/swiper.min.js"></script>
    <script>
        //轮播
        var swiper = new Swiper('.swiper-container1', {
            autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
            loop: true,

        });
        var swiper1 = new Swiper('.swiper-container2', {
            pagination: {
                el: '.swiper-pagination2',
            },
        });

    
    </script>
</body>

</html>